<!-- components/ContentSkeleton.vue -->
<template>
  <div class="min-h-[calc(100vh-96px)] p-4 md:p-8 animate-pulse">
    <!-- 页面标题骨架 -->
    <div class="text-center mb-8">
      <div
        class="h-12 md:h-16 bg-gradient-to-r from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-700 rounded-lg w-64 mx-auto mb-4"
      ></div>
      <div class="h-6 bg-gray-300 dark:bg-gray-700 rounded w-96 max-w-2xl mx-auto"></div>
    </div>

    <!-- 标签页导航骨架 -->
    <div class="flex flex-wrap justify-center gap-2 mb-8">
      <div v-for="i in 4" :key="i" class="h-12 bg-gray-300 dark:bg-gray-700 rounded-lg w-24"></div>
    </div>

    <!-- 内容区域骨架 -->
    <div class="max-w-4xl mx-auto space-y-8">
      <!-- 主要内容卡片 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg">
        <div class="flex flex-col md:flex-row gap-8 items-center">
          <!-- 头像骨架 -->
          <div
            class="w-48 h-48 rounded-full bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-700 flex-shrink-0"
          ></div>

          <!-- 个人信息骨架 -->
          <div class="flex-1 space-y-4 w-full">
            <!-- 姓名 -->
            <div class="h-8 bg-gray-300 dark:bg-gray-700 rounded w-40"></div>

            <!-- 描述段落 -->
            <div class="space-y-3">
              <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-full"></div>
              <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-5/6"></div>
              <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-4/5"></div>
            </div>

            <div class="space-y-3">
              <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-full"></div>
              <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-3/4"></div>
            </div>

            <!-- 标签骨架 -->
            <div class="flex flex-wrap gap-2">
              <div
                v-for="i in 4"
                :key="i"
                class="h-7 bg-gray-300 dark:bg-gray-700 rounded-full w-16"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 双列卡片骨架 -->
      <div class="grid md:grid-cols-2 gap-6">
        <div v-for="i in 2" :key="i" class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg">
          <!-- 卡片标题 -->
          <div class="h-6 bg-gray-300 dark:bg-gray-700 rounded w-32 mb-4"></div>

          <!-- 列表项骨架 -->
          <div class="space-y-3">
            <div
              v-for="j in 4"
              :key="j"
              class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-full"
            ></div>
          </div>
        </div>
      </div>

      <!-- 技能/经历骨架 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg">
        <!-- 标题 -->
        <div class="h-8 bg-gray-300 dark:bg-gray-700 rounded w-32 mb-6"></div>

        <!-- 技能条骨架 -->
        <div class="space-y-6">
          <div v-for="i in 6" :key="i" class="space-y-2">
            <div class="flex justify-between items-center">
              <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-24"></div>
              <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-12"></div>
            </div>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-3">
              <div
                class="h-3 bg-gray-300 dark:bg-gray-500 rounded-full"
                :style="{ width: `${Math.random() * 40 + 50}%` }"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部双列卡片骨架 -->
      <div class="grid md:grid-cols-2 gap-6">
        <div
          v-for="i in 2"
          :key="`bottom-${i}`"
          class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg"
        >
          <div class="h-6 bg-gray-300 dark:bg-gray-700 rounded w-24 mb-4"></div>
          <div class="space-y-3">
            <div v-for="j in 5" :key="j" class="flex items-center justify-between">
              <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-32"></div>
              <div class="h-4 bg-gray-300 dark:bg-gray-700 rounded w-12"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
